<template>
	<view style="padding-bottom: 88rpx;">
		<!-- TODO 转发联系人、指定管理员，移除群聊，邀请好友，选择朋友，群组，群组转让，禁言，创建群组 -->
		<u-search v-model="form.keyword" placeholder="请输入搜索内容" :show-action="false" margin="20rpx 24rpx" height="68"></u-search>
		
		<u-index-list>
				<view v-for="(item, index) in list" :key="index">
					<u-index-anchor :index="index"></u-index-anchor>
					<u-cell-group>
						<view v-for="(item2, index2) in item" :key="index2">
							<u-cell-item :arrow="false">
								<view class="u-flex" slot="title" style="height: 95rpx;width: 400rpx;">
									<view class="u-flex" style="height: 95rpx;"><u-image src="/static/logo.png" width="74rpx" height="74rpx" border-radius="6" :fade="false"></u-image></view>
									<view class="u-flex u-margin-left-32 u-font-30">{{item2.name}}</view>
								</view>
								<u-checkbox :name="item2.id" v-model="item2.selected" slot="icon" active-color="#2FD6AC" @change="setSelect"></u-checkbox>
							</u-cell-item>
						</view>
					</u-cell-group>
				</view>
		</u-index-list>
		<u-empty class="empty" mode="list" v-if="Object.keys(list).length == 0"></u-empty>
		
		<view class="u-flex u-row-between btn-area">
			<view>
				<u-checkbox v-model="allSelectedStatus" active-color="#2FD6AC" @change="setAllSelect"></u-checkbox>
			</view>
			<view>
				<u-button :custom-style="{height:'60rpx',borderRadius:'10rpx',backgroundColor:'#2FD6AC',color:'#ffffff'}">发送</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					keyword: ''
				},
				list: {
					'A': [
						{id: 1,name: '安阳', selected: true},
						{id: 2,name: '安阳', selected: false},
						{id: 3,name: '安阳', selected: false},
						{id: 4,name: '安阳', selected: false},
						{id: 5,name: '安阳', selected: false},
						{id: 6,name: '安阳', selected: false},
						{id: 7,name: '安阳', selected: false},
						{id: 8,name: '安阳', selected: false},
						{id: 9,name: '安阳', selected: false},
						{id: 10,name: '安阳', selected: false},
						{id: 11,name: '安阳', selected: false}
					],
					'B': [
						{id: 12,name: '保安', selected: false},
						{id: 13,name: '保安', selected: false},
						{id: 14,name: '保安', selected: false},
						{id: 15,name: '保安', selected: false},
						{id: 16,name: '保安', selected: false},
					]
				},
				selectIdArray: [],
				allSelectedStatus: false,
			}
		},
		methods: {
			setAllSelect() {
				let list = Object.keys(this.list)
				list.forEach((item) => {
					this.list[item].forEach((v, k) => {
						this.list[item][k].selected = !this.allSelectedStatus
					})
				})
			},
			setSelect() {
				let res = true
				let list = Object.keys(this.list)
				setTimeout(() => {
					list.forEach((item) => {
						this.list[item].forEach((v, k) => {
							if (!v.selected) {
								res = false
							}
						})
					})
					this.allSelectedStatus = res
				}, 1)
			}
		}
	}
</script>

<style lang="scss">
	.btn-area {
		width: 750rpx;
		height: 88rpx;
		background-color: #F8F8F8;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 65rpx;
		z-index: 2;
	}
</style>
